<template>
    <div>
        <div style="display:flex;">
            <h1 style="font-size: 16px;">订单详情</h1>
            <el-button style="margin-left: 60vw;height: 30px" size="mini" type="primary" @click="goBack">返回</el-button>
        </div>
        <el-card style="width: 70vw;">
        <el-table
                :data="tableData"
                stripe
                style="width: 100%">
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column align="center" label="图片" prop="picture" width="100px">
                <template v-slot="scope">
                    <el-avatar :size="45" :src="scope.row.picture" shape="square"></el-avatar>
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="菜名"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="price"
                    label="单价"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="count"
                    label="数量"
                    width="180">
            </el-table-column>
            <el-table-column
                    label="价格"
                    width="180">
                <template v-slot="scope">
                    {{scope.row.count * scope.row.price}}
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="margin-top: 10px;">
            <el-pagination background :current-page="params.pageNum" :page-size="params.pageSize"
                           layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
        </el-card>
    </div>
</template>

<script>
    import request from "@/request";

    export default {
        name: "OrderInfo",
        data(){
            return{
                orderId : this.$route.query.param,
                total: 0,
                tableData:[],
                params: {
                    pageNum: 1,
                    pageSize: 8,

                },
            }
        },
        methods:{
            goBack(){
              this.$router.back()
            },
            load() {
                this.params.orderId=this.orderId
                request.get('/order/info', {
                    params: this.params
                }).then(res => {
                    console.log(res)
                    if (res.code === "200") {
                        this.total = res.data.total;
                        this.tableData = res.data.list;

                    }
                })
            },
            handleCurrentChange(pageNum) {
                this.params.pageNum = pageNum;
                this.load()
            },
        },
        mounted() {
            this.load()
        }

    }
</script>

<style scoped>
    #head {
        height: 350px;
    }
</style>